<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">	
			<a class="mui-icon mui-icon-back mui-action-back mui-pull-left"></a>
			<h1 class="mui-title ">Audio</h1>
			<a class="mui-icon-extra mui-icon-extra-topic mui-pull-right" style="margin-top: 10px;"
				 onclick="openWindow('audio','../doc/audio.html?v=20190621')"></a>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-row">
					Audio用于管理音频设备，可调用麦克风录制音频文件，也可播放音频文件。
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-success mui-btn-block" onclick="getAcc();">播放音乐</button>
					<button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="openWindow('accelerometer_shake','accelerometer_shake.html?v=20190621')">开始录音</button>
					
					<button type="button" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined" onclick="watchAcc();">监听设备加速度变化</button>
					<button type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined" onclick="watchStop();">停止监听设备加速度变化</button>
				</div>
				<br />
				<div class="mui-row" id="divInfo"></div>
			</div>
			
		</div>
		
		<nav class="mui-bar mui-bar-tab" style="height: 60px;">
			<div class="mui-row" style="vertical-align: middle; text-align: center;">
				<span class="mui-progressbar mui-progressbar-in"  data-progress="50"
					 style="background-color: green;height: 2px;margin-top:10px;width:100%;" ></span>
				
				<span style="float: left; width: 60px;margin-left: 0px; margin-top: -10px;">0:00</span>
				<span style="float: right; width:60px;margin-right: 0px;margin-top: -10px;">4:11</span>
			</div>
			<div class="mui-button-row">
				<button class="mui-btn mui-btn-primary" style="margin-top: -15px; width: 60px;">|<</button>
				<button id="btnPlay" class="mui-btn mui-btn-primary" style="margin-top: -15px; width: 80px;" onclick="playerStart()">播放</button>
				<button class="mui-btn mui-btn-primary" style="margin-top: -15px; width: 60px;">>|</button>
			</div>
		</nav>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var gentry=null;
			mui.plusReady(function(){
				// 获取音频目录对象
				plus.io.resolveLocalFileSystemURL('_doc/', function(entry){
					entry.getDirectory('audio', {create:true}, function(dir){
						gentry = dir;
						//updateHistory();
					}, function(e){
						outSet('Get directory "audio" failed: '+e.message);
					});
				}, function(e){
					outSet('Resolve "_doc/" failed: '+e.message);
				} );
			});
			
			function outSet(message){
				document.getElementById("divInfo").innerText = message;
			}
			
			function outLine(message){
				var text = document.getElementById("divInfo").innerText;
				document.getElementById("divInfo").innerText = text + "\n" + message;
			}
			
			function playerStart(){
				var text = document.getElementById("btnPlay").innerText;
				if(text == "播放"){
					startPlay("../audio/friendship.mp3");
					document.getElementById("btnPlay").innerText = "停止";
				}
				else
				{
					stopPlay();
					document.getElementById("btnPlay").innerText = "播放";
				}
				
			}
			
			// 播放文件相关对象
			var player=null,pt=null,pp=null,ps=null,interval=null;
			// 开始播放
			function startPlay(url){
				//ep.style.display = 'block';
				//var L = pp.clientWidth;
				player = plus.audio.createPlayer(url);
				player.play(function(){
					outLine('播放完成！');
					// 播放完成
					//pt.innerText = timeToStr(d)+'/'+timeToStr(d);
					//ps.style.webkitTransition = 'all 0.3s linear';
					//ps.style.width = L+'px';
					stopPlay();
				}, function(e){
					outLine('播放音频文件"'+url+'"失败：'+e.message);
				});
				// 获取总时长
				var d = player.getDuration();
				if(!d){
					console.log("total="+d);
					//pt.innerText = '00:00:00/'+timeToStr(d);
				}
				interval = setInterval(function(){
					if(!d){ // 兼容无法及时获取总时长的情况
						console.log("total="+d);
						d = player.getDuration();
					}
					var current = player.getPosition();
					if(!current){  // 兼容无法及时获取当前播放位置的情况
						return;
					}
					console.log("current="+current);
					//pt.innerText = timeToStr(current)+'/'+timeToStr(d);
					//var pct = Math.round(L*c/d);
					//if(pct < 8){
					//	pct = 8;
					//}
					//ps.style.width = pct+'px';
				}, 1000);
			}
			// 停止播放
			function stopPlay(){
				clearInterval(interval);
				interval=null;
				setTimeout(resetPlay, 500);
				// 操作播放对象
				if(player){
					player.stop();
					player=null;
				}
			}
			// 重置播放页面内容
			function resetPlay(){
//				ep.style.display = 'none';
//				ps.style.width = '8px';
//				ps.style.webkitTransition = 'all 1s linear';
//				pt.innerText = '00:00:00/00:00:00';	
			}
		</script>
	</body>

</html>